<!DOCTYPE html>
<html dir="ltr">

<head>
  <meta charset="UTF-8">
  <title>Searchbar - Basic</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
  <link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
  <link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
  <script src="../../../../../scripts/testing/scripts.js"></script>
  <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
  <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script></head>

<body>
  <ion-app>

    <ion-header>
      <ion-toolbar>
        <ion-title>Searchbar - Basic</ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content id="content">
      <h5 class="ion-padding-start ion-padding-top"> Search - Default </h5>
      <ion-searchbar id="basic" value="test" type="tel" show-cancel-button="focus" debounce="500">
      </ion-searchbar>

      <h5 class="ion-padding-start ion-padding-top"> Search - No Cancel Button </h5>
      <ion-searchbar class="red-box" id="noCancel" value="after view" autocorrect="off" autocomplete="off" spellcheck="true" type="text" show-cancel-button="never">
      </ion-searchbar>

      <h5 class="ion-padding-start ion-padding-top"> Search - Always Show Cancel Button</h5>
      <ion-searchbar id="noCancel" value="after view" animated="true" show-cancel-button="always">
      </ion-searchbar>

      <h5 class="ion-padding-start ion-padding-top"> Search - Never Show Cancel Button</h5>
      <ion-searchbar id="noCancel" value="after view" animated="true" show-cancel-button="never">
      </ion-searchbar>

      <h5 class="ion-padding-start ion-padding-top"> Search - Show Cancel Button on Focus</h5>
      <ion-searchbar id="noCancel" value="after view" animated="true" show-cancel-button="focus">
      </ion-searchbar>

      <h5 class="ion-padding-start ion-padding-top"> Search - Cancel Button set to false</h5>
      <ion-searchbar id="noCancel" value="after view" autocorrect="off" autocomplete="off" spellcheck="true" type="text" show-cancel-button="never">
      </ion-searchbar>

      <h5 class="ion-padding-start ion-padding-top"> Search - Cancel Button set to true</h5>
      <ion-searchbar id="noCancel" value="after view" autocorrect="off" autocomplete="off" spellcheck="true" type="text" show-cancel-button="focus">
      </ion-searchbar>

      <h5 class="ion-padding-start ion-padding-top"> Search - Input mode set to numeric</h5>
      <ion-searchbar id="noCancel" value="after view" inputmode="numeric" autocorrect="off" autocomplete="off" spellcheck="true" type="text" show-cancel-button="focus">
      </ion-searchbar>

      <h5 class="ion-padding-start ion-padding-top"> Search - Disabled </h5>
      <ion-searchbar id="disabled" value="disabled" type="text" disabled="true">
      </ion-searchbar>

      <h5 class="ion-padding-start ion-padding-top"> Search - Danger </h5>
      <ion-searchbar color="danger" show-cancel-button="focus">
      </ion-searchbar>

      <h5 class="ion-padding-start ion-padding-top"> Search - Custom Search Icon </h5>
      <ion-searchbar search-icon="home" show-cancel-button="focus" debounce="500">
      </ion-searchbar>

      <h5 class="ion-padding-start ion-padding-top"> Search - Animated </h5>
      <ion-searchbar animated="true" show-cancel-button="focus" debounce="500">
      </ion-searchbar>

      <h5 class="ion-padding-start ion-padding-top"> Search - Custom Placeholder </h5>
      <ion-searchbar id="dynamicProp" value="33" autocorrect="on" show-cancel-button="focus" autocomplete="on" spellcheck="false"
        type="number" placeholder="Filter Schedules">
      </ion-searchbar>

      <h5 class="ion-padding-start ion-padding-top"> Search - Custom Cancel Button Danger </h5>
      <ion-searchbar show-cancel-button="focus" cancel-button-text="Really Long Cancel" color="danger">
      </ion-searchbar>

      <h5 class="ion-padding-start ion-padding-top"> Search - Custom Cancel Button Icon through property</h5>
      <ion-searchbar show-cancel-button="focus" cancel-button-icon="rewind">
      </ion-searchbar>

      <h5 class="ion-padding-start ion-padding-top"> Search - Value passed </h5>
      <ion-searchbar value="mysearch" cancel-button-text="Really Long Cancel" color="dark" show-cancel-button="focus">
      </ion-searchbar>

      <h5 class="ion-padding-start ion-padding-top"> Search - Mode iOS</h5>
      <ion-searchbar mode="ios" animated="true" show-cancel-button="focus" placeholder="Search">
      </ion-searchbar>

      <h5 class="ion-padding-start ion-padding-top"> Search - Mode MD</h5>
      <ion-searchbar mode="md" animated="true" show-cancel-button="focus" placeholder="Search">
      </ion-searchbar>

      <h5 class="ion-padding-start ion-padding-top"> Search - DebounceTime </h5>
      <ion-searchbar autocorrect="on" show-cancel-button="focus" autocomplete="on" spellcheck="true" type="text" debounce="5000"
        placeholder="Check the log">
      </ion-searchbar>

      <h5 class="ion-padding-start ion-padding-top"> Search - Animated and No Cancel</h5>
      <ion-searchbar id="dynamicAttr" placeholder="Search" animated="true" show-cancel-button="never">
      </ion-searchbar>

      <h5 class="ion-padding-start ion-padding-top"> Search - HTML Placeholder Treated As Text </h5>
      <ion-searchbar mode="ios" animated="true" show-cancel-button="focus" placeholder="<ion-button>Hello</ion-button>">
      </ion-searchbar>

      <p class="ion-padding">
        <ion-button expand="block" (click)="changeValue()">Change Value</ion-button>
      </p>

      <div class="ion-padding-horizontal">
        <ion-button expand="block" onClick="toggleProp()">Toggle Property</ion-button>
      </div>
      <div class="ion-padding">
        <ion-button expand="block" color="secondary" onClick="toggleAttr()">Toggle Attribute</ion-button>
      </div>

      <div class="ion-padding-horizontal">
        <ion-button expand="block" color="secondary" onClick="toggleDisabled()">Toggle disabled</ion-button>
      </div>

      <style>
        .red-box {
          --box-shadow: 0 2px 2px 0 rgba(255, 0, 0, 0.14), 0 3px 1px -2px rgba(255, 0, 0, 0.2), 0 1px 5px 0 rgba(255, 0, 0, 0.12);
        }
      </style>

      <script>
        function toggleAttr() {
          var dynamicAttr = document.getElementById('dynamicAttr');

          // Toggle animated attribute
          const attrIsAnimated = dynamicAttr.getAttribute('animated') === 'true' ? false : true;
          dynamicAttr.setAttribute('animated', attrIsAnimated);

          // Toggle show-cancel-button attribute
          let attrShowCancel;
          const showCancelValue = dynamicAttr.getAttribute('show-cancel-button');

          switch(showCancelValue) {
            case true:
            case "true":
              attrShowCancel = false;
              break;
            case false:
            case "false":
              attrShowCancel = 'always';
              break;
            case 'always':
              attrShowCancel = 'focus';
              break;
            case 'focus':
              attrShowCancel = 'never';
              break;
            case 'never':
            default:
              attrShowCancel = true;
              break;
          }

          dynamicAttr.setAttribute('show-cancel-button', attrShowCancel);

          // Toggle placeholder attribute
          const attrPlaceholder = dynamicAttr.getAttribute('placeholder') === 'Search' ? 'Enter a Search Term' : 'Search';
          dynamicAttr.setAttribute('placeholder', attrPlaceholder);
        }

        function toggleDisabled() {
          var dynamicAttr = document.getElementById('dynamicAttr');

          // Toggle animated attribute
          const attrIsAnimated = dynamicAttr.getAttribute('disabled') === 'true' ? false : true;
          dynamicAttr.setAttribute('disabled', attrIsAnimated);
        }

        function toggleProp() {
          var dynamicProp = document.getElementById('dynamicProp');
          console.log(dynamicProp.autocorrect, dynamicProp.autocomplete, dynamicProp.spellcheck);

          // Toggle autocorrect property
          const propIsAutocorrect = dynamicProp.autocorrect === 'on' ? 'off' : 'on';
          dynamicProp.autocorrect = propIsAutocorrect;

          // Toggle autocomplete property
          const propIsAutocomplete = dynamicProp.autocomplete === 'on' ? 'off' : 'on';
          dynamicProp.autocomplete = propIsAutocomplete;

          // Toggle spellcheck property
          const propIsSpellcheck = dynamicProp.spellcheck === true ? false : true;
          dynamicProp.spellcheck = propIsSpellcheck;
        }

        const content = document.querySelector('#content')
        content.addEventListener('ionChange', (ev) => {
          console.log(ev);
        });
        content.addEventListener('ionCancel', (ev) => {
          console.log(ev);
        });
        content.addEventListener('ionClear', (ev) => {
          console.log(ev);
        });
      </script>
    </ion-content>

  </ion-app>
</body>

</html>
